<template>
  <CocosScene ref="scene">
      <Sprite ref="sprite" :spriteProps="sprops" :spriteFrame="frame" :nodeComps="[ncomp]" :nodeProps="nprops" />
      <AnimationFrame v-if="frames" :animationProps="{prename:'000',sample:8,frames:frames,loop:false}" :nodeProps="{x:-400,scale:1,onFinished:attackFinished}" />
      <AnimationFrame v-if="attframes" :animationProps="{prename:'3_000',sample:10,frames:attframes,loop:true}" :nodeProps="{x:400,scale:1}" />
      <Node :nodeProps="{scale:5}">
        <Particle v-if="dict" :fileasset="dict" :playcount="playcount" />
      </Node>
  </CocosScene >
</template>

<script>
/* eslint-disable */

import {CocosScene,Node,AnimationFrame,Sprite,Particle,CocosWrap} from "./cocos";
import FlipAction from './flip';

export default {
  name: "Scene1",
  components: {
    CocosScene,Node,Sprite,AnimationFrame,Particle,
  },
  data() {
    return {
      frame:null,
      nprops:{
        name:'cb',opacity:180,x:0,y:0,onTouchStart:(e)=>this.onTouchStart(e),width:1024,height:1024,color:'#f00',
      },
      ncomp:null,
      sprops:{
        type:2,//cc.Sprite.Type.TILED,
        sizeMode:0,
        // srcBlendFactor:cc.macro.BlendFactor.SRC_ALPHA, dstBlendFactor:cc.macro.BlendFactor.ONE,
      },
      frames:null,
      attframes:null,
      dict:null,
      playcount:0,
    };
  },

mounted() {
    //banyu
    cc.assetManager.loadRemote("./banyu.png", (err, tex) => {
        let frame = new cc.SpriteFrame(tex);
        this.frame = frame;//{type:"frame",value:frame};
        this.toggleRotation();

        this.ncomp = {
            type: FlipAction,
            props: {
              delay:0,
              duration:0.8,
                doing: true,
            },
          };
    });

    var name = "attack";//"qihe0";//"attack"
    CocosWrap.loadAtlasFrames("./examples/"+name+".plist","./examples/"+name+".png",(frames)=>{
      this.attackFinished = (comp)=>{this.handleFinishedAttack(comp)};
      this.frames = frames;
    });
    // CocosWrap.loadAtlasFrames("./examples/attack.plist","./examples/attack.png",(frames)=>{
    //   this.attackFinished = (comp)=>{this.handleFinishedAttack(comp)};
    //   this.frames = frames;
    // });

    CocosWrap.loadAtlasFrames("./examples/run.plist","./examples/run.png",(frames)=>{
      this.attframes = frames;
    });

    // linerpenghuo,effect,Effect_born_1,Effect_chuansong_hong,Effect_cure_explore_1,Effect_login,Effect_ui_particle_dianjixiaoguo,lizihuoqiu
    // NewParticle_xingxing_1,
    cc.assetManager.loadRemote("./examples/Effect/Effect_login.plist", (err, asset) => {
      console.log("loadRemote asset",asset._nativeAsset);
      delete asset._nativeAsset.textureFileName;
      this.dict = asset;
      this.lastplay = 0;
      this.startParticle();
    });

    this.startopacity();
    // this.createlabel("total is "+total);
  },
  methods: {
    startParticle() {
      setTimeout(()=>{
        if(this.playcount){
          this.lastplay = this.playcount;
          this.playcount = 0;
        }else{
          this.playcount = this.lastplay + 1;
        }
        this.startParticle();
      },5000);
    },
    handleFinishedAttack(comp){
      // console.log("handleFinishedAttack finished");
      setTimeout(() => {
        comp.play();
      }, 2000);
    },
    onTouchStart(e){
      // console.log("onTouchStart",e,this);
      this.toggleRotation();
    },
    toggleRotation(){
      // this.rotating = !this.rotating;
      if(this.$refs.sprite && this.$refs.sprite.ccnode){
        if(this.rotating){
          this.$refs.sprite.ccnode.stopAction(this.rotating);
          this.rotating = null;
        }else{
          this.rotating = cc.rotateBy(5, 360).repeatForever();
          this.$refs.sprite.ccnode.runAction(this.rotating);
          // this.$refs.sprite.ccnode.stopAllActions();
        }
      }
    },
    startrot() {
      setTimeout(()=>{
        if(this.$refs.sprite && this.$refs.sprite.ccnode){
          let act = cc.rotateBy(10, 360);
          // cc.TweenAction
          this.$refs.sprite.ccnode.runAction(act.repeatForever());
        }else{
          this.startrot();
        }
      },50);
    },
    startopacity() {
      setTimeout(()=>{
        if(this.ncomp){
          this.ncomp = {
            type: FlipAction,
            props: {
              delay:0,
              duration:0.8,
              doing: true,//!this.ncomp.props.doing,
            },
          }
        }
        if(!this.aaaa){
          this.aaaa = true;
          this.nprops = { name:'cbb',opacity:180,x:-200,y:-200,onTouchStart:(e)=>this.onTouchStart(e),width:1024,height:1024};
        }
        this.startopacity();
      },10000);
    },
  },

};
</script>
